<template>
  <div class="setting">
    <el-tabs style="margin-top: 20px" type="border-card" v-model="active">
      <el-tab-pane label="基础设置" name="1">
        <el-form
          :model="form"
          ref="form"
          label-width="180px"
          :inline="false"
          size="normal"
        >
          <el-form-item class="center" label="图标：">
            <svg
              @click="showIconDialog()"
              style="height: 50px; width: 50px; cursor: pointer"
              aria-hidden="true"
            >
              <use :xlink:href="'#' + setting.icon"></use>
            </svg>
            <span class="tip"> (点击图标切换) </span>
          </el-form-item>
          <el-form-item label="问卷状态：">
            <el-switch
              v-model="form.is_active"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="true"
              :inactive-value="false"
              active-text="发布"
              inactive-text="冻结"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="一个用户可填写几次：">
            <el-input-number
              :min="0"
              size="small"
              v-model="setting.num"
            ></el-input-number>
            <span class="tip">(0代表无数次)</span>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="流程说明" name="2">
        <Tinymce v-model="setting.process" height="47vh"></Tinymce>
      </el-tab-pane>
      <el-tab-pane label="业务说明" name="3">
        <Tinymce v-model="setting.business" height="47vh"></Tinymce
      ></el-tab-pane>
      <el-divider direction="horizontal" content-position="left"></el-divider>
      <el-button type="primary" size="small" @click="update">保存</el-button>
    </el-tabs>
    <el-dialog
      title="图标切换"
      :visible.sync="IconDialog"
      width="70%"
      top="0"
      @close="IconDialog = false"
    >
      <div class="icon-box">
        <svg
          v-for="(item, index) in icon"
          :key="index"
          @click="select(item)"
          style="height: 60px; width: 60px; cursor: pointer;margin:10px;"
          aria-hidden="true"
        >
          <use :xlink:href="'#' + item"></use>
        </svg>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce/index.vue";
import { getSurveyById } from "@/api/index";
import { update } from "@/api/form";
export default {
  components: { Tinymce },
  data() {
    return {
      active: "1",
      setting: {
        num: 1,
        icon: "icon-xinpin",
      },
      IconDialog: false,
      form: {},
      icon: [
        "icon-xinpin",
        "icon-chaoshi",
        "icon-gouwu",
        "icon-shengxianshuiguo",
        "icon-zuzhi",
        "icon-yinhangka",
        "icon-kabao",
        "icon-shenghuo",
        "icon-waimai",
        "icon-meishi1",
        "icon-qinzi",
        "icon-rili",
        "icon-yingshi",
        "icon-jiushui",
        "icon-kafei",
        "icon-lipin",
        "icon-KTV",
        "icon-youxi",
        "icon-huazhuangpin",
        "icon-jiaoyu",
        "icon-yishu",
        "icon-chongwu",
        "icon-jianshen",
        "icon-qiche",
        "icon-huiyuan1",
        "icon-shangou",
        "icon-yiliao",
        "icon-shangcheng",
        "icon-shangjia",
        "icon-elemo",
        "icon-meituan",
        "icon-peisong",
        "icon-chuju",
        "icon-hongpei",
        "icon-huodong",
        "icon-biaoshu",
        "icon-caidan",
        "icon-xinxi",
        "icon-QQ",
        "icon-weibo",
        "icon-weixin",
        "icon-pingjia",
        "icon-yinle",
        "icon-hongbao",
        "icon-kongjian",
        "icon-qianbao",
        "icon-douban",
        "icon-tongxunlu",
        "icon-anquan",
        "icon-baohu",
        "icon-shezhi",
        "icon-sougoushuru",
        "icon-xinhao",
        "icon-banjiang",
        "icon-chongzhizhongxin",
        "icon-miaosha",
        "icon-fushi",
        "icon-jiadian",
        "icon-yue",
        "icon-daifahuo",
        "icon-daifukuan",
        "icon-daishouhuo",
        "icon-fapiao",
        "icon-huiyuanka",
        "icon-dianzan",
        "icon-gaishuai",
        "icon-yaoqing",
        "icon-lvyou",
        "icon-paiming",
        "icon-xunzhang",
        "icon-baojian",
        "icon-paishe",
        "icon-xiuxian",
        "icon-gengduo",
        "icon-licai",
        "icon-tongzhuang",
        "icon-xihuan",
        "icon-youle",
        "icon-jiaoyu1",
        "icon-mogujie",
        "icon-yijianfankui",
        "icon-dingding",
        "icon-jiushui1",
        "icon-liangyou",
        "icon-xiaoxi",
        "icon-zhanghaoguanli",
        "icon-zixun",
        "icon-zhuanzhang",
        "icon-zuzhi1",
        "icon-kaquanbao",
        "icon-riji",
        "icon-xindong",
        "icon-quanwei",
        "icon-shijian",
        "icon-hongbao1",
        "icon-wuliu",
        "icon-xiangce",
        "icon-jingxuan",
        "icon-paizhao",
        "icon-shuiguo",
        "icon-muying",
        "icon-toutiao",
        "icon-tuangou",
        "icon-huiyuanquanyi",
        "icon-jifen",
        "icon-qingdan",
        "icon-baomi",
        "icon-nvzhuang",
        "icon-jiaju",
        "icon-xingbie",
        "icon-yundong",
        "icon-chakanbingli",
        "icon-zhongbiao",
        "icon-faxian",
        "icon-guahao",
        "icon-yexiao",
        "icon-chuyi",
        "icon-huore",
        "icon-tixing",
        "icon-zhishi",
        "icon-zhuti",
        "icon-cetizhong",
        "icon-zixun1",
        "icon-naozhong",
        "icon-pinpai",
        "icon-quanzi",
        "icon-biancheng",
        "icon-yinle1",
        "icon-duihuanma",
        "icon-paihang",
        "icon-shipin",
        "icon-kecheng",
        "icon-zengsong",
        "icon-chanpin",
        "icon-fankui",
        "icon-youxi2",
        "icon-qichepiao",
        "icon-wodedingdan",
        "icon-wuyefei",
        "icon-anquanzhongxin",
        "icon-koulingmibao",
        "icon-tingchechang",
        "icon-gongwu",
        "icon-jiayou",
        "icon-gonglve",
        "icon-qianbao1",
        "icon-tuijianyoujiang",
        "icon-ditiepiao",
        "icon-qiye",
        "icon-ershouche",
        "icon-yibao",
        "icon-zhoubianyou",
        "icon-jingdian",
        "icon-xiche",
        "icon-zihangche",
        "icon-liuyan",
        "icon-pingjia1",
        "icon-weizhangjiaofei",
        "icon-fujin",
        "icon-jisuan",
        "icon-dingyue",
        "icon-hangqing",
        "icon-kuaixun",
        "icon-ceping",
        "icon-daogou",
        "icon-koubei",
        "icon-qunti",
        "icon-shipinliaotian",
        "icon-gupiao",
        "icon-yinle2",
        "icon-youxi1",
        "icon-chihewanle",
        "icon-zhibo",
        "icon-dianping",
        "icon-lianxi",
        "icon-xinyuandan",
        "icon-gonggao",
        "icon-tuijian",
        "icon-xuexiao",
        "icon-dianshiju",
        "icon-guanggao",
        "icon-yunshipin",
        "icon-miaosha1",
        "icon-zhaomu",
        "icon-jiaoyu2",
        "icon-tuandui1",
        "icon-zhibo1",
        "icon-paike",
        "icon-tiyu",
        "icon-dianshiju1",
        "icon-huati",
        "icon-dongman",
        "icon-yule",
        "icon-fenxiang",
        "icon-hangye",
        "icon-VIP",
        "icon-xiaoshuai",
        "icon-luyin",
        "icon-wenjianjia",
        "icon-shangchuan",
        "icon-shipin1",
        "icon-anzi",
        "icon-chaxun",
        "icon-xiazai",
        "icon-fapiao1",
        "icon-renwu",
        "icon-daka",
        "icon-gonggao1",
        "icon-kaoqin",
        "icon-jiance",
        "icon-sousuo",
        "icon-fuli",
        "icon-wangluo",
        "icon-yinshua",
        "icon-anquanzhongxin1",
        "icon-shoucangjia",
        "icon-guanzhu",
        "icon-rili1",
        "icon-dakaqiandao",
        "icon-tuandui",
        "icon-shenghuojiaofei",
        "icon-wodemaidan",
        "icon-shouhuodizhi",
        "icon-wodemaidan1",
        "icon-zhanghuxiugai",
        "icon-ditu",
        "icon-fenxiangerweima",
        "icon-feijipiao",
        "icon-huochepiao",
        "icon-jifenduihuan",
        "icon-paimai",
        "icon-youhuiquan",
        "icon-jiudian",
        "icon-meishi",
        "icon-zuji",
        "icon-huiyuan",
        "icon-shoucang",
      ],
    };
  },
  created() {
    this.getSurveyById();
  },
  methods: {
    getSurveyById() {
      getSurveyById(this.$route.query.id).then((res) => {
        if (res.setting) {
          this.setting = JSON.parse(res.setting);
        }
        this.form = res;
      });
    },
    update() {
      this.form.setting = JSON.stringify(this.setting);
      update(this.$route.query.id, this.form).then((res) => {
        this.$notify({
          title: "提示",
          message: "保存设置成功",
          type: "success",
          duration: "2000",
          position: "top-right",
          showClose: "true",
        });
      });
    },
    showIconDialog() {
      this.IconDialog = true;
    },
    select(i){
      this.IconDialog = false;
      this.setting.icon=i
    }
  },
};
</script>

<style scoped>
.tip {
  font-size: 12px;
  color: #f56c6c;
  display: inline-block;
  padding-left: 20px;
}
.center >>> .el-form-item__content {
  display: flex;
  align-items: center;
}
.icon-box {
  display: flex;
  flex-wrap: wrap;
}
.setting>>> .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
.setting >>>.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
</style>
